@if(isEmpty(target)&&isEmpty(thumb)){
<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit"/><!-- 让360浏览器默认选择webkit内核 -->

    <!-- 全局css -->
    <link rel="shortcut icon" href="${ctxPath}/static/favicon.ico">
    <link href="${ctxPath}/static/libs/bootstrap/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxPath}/static/libs/font-awesome/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxPath}/static/backend/common.css" rel="stylesheet">

    <!-- 全局js -->
    <script src="${ctxPath}/static/libs/jquery/jquery.min.js?v=2.1.4"></script>
    <script src="${ctxPath}/static/libs/bootstrap/bootstrap.min.js?v=3.3.6"></script>
</head>

<body class="gray-bg">
<div class="content" style="height: 100%;">
<div id="modal-image">
@}
<div id="filemanager" class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">图片管理器</h4>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="col-sm-5">
       	  <a href="${ctxPath}/imagemanager?path=${parentPath}&target=${target!}&thumb=${thumb!}" data-toggle="tooltip" title="上一级" id="button-parent" class="btn btn-default"><i class="fa fa-level-up"></i></a>
          <a href="${ctxPath}/imagemanager?path=${currentPath}&target=${target!}&thumb=${thumb!}" data-toggle="tooltip" title="刷新" id="button-refresh" class="btn btn-default"><i class="fa fa-refresh"></i></a>
          <button type="button" data-toggle="tooltip" title="上传" id="button-upload" class="btn btn-primary"><i class="fa fa-upload"></i></button>
          <button type="button" data-toggle="tooltip" title="新建文件夹" id="button-folder" class="btn btn-default"><i class="fa fa-folder"></i></button>
          <button type="button" data-toggle="tooltip" title="删除" id="button-delete" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
        </div>
        <div class="col-sm-7">
          <div class="input-group">
            <input type="text" name="search" value="${filterName!}" placeholder="检索中..." class="form-control">
            <span class="input-group-btn">
            <button type="button" data-toggle="tooltip" title="查询" id="button-search" class="btn btn-primary"><i class="fa fa-search"></i></button>
            </span></div>
        </div>
      </div>
      <hr />
      <div class="row">
      @for(_file in fileList){
        <div class="col-sm-3 col-xs-6 text-center item">
          @if(_file.isDirectory){
          <div class="text-center"><a href="${ctxPath}/imagemanager?path=${_file.filePath}&target=${target!}&thumb=${thumb!}" class="directory" style="vertical-align: middle;"><i class="fa fa-folder fa-5x"></i></a></div>
          <label>
            <input type="checkbox" name="path" value="${_file.filePath}" />
            ${_file.fileName}
          </label>
          @}else{
          @var _tmpUrl = ctxPath+"/file/image/"+_file.filePath;
          <a href="${_tmpUrl}" class="thumbnail"><img src="${_tmpUrl}" alt="${_file.fileName}" title="${_file.fileName}" /></a>
          <label>
            <input type="checkbox" name="path" value="${_file.filePath}" />
            ${_file.fileName}
          </label>
          @}
        </div>
      @}
      </div>
      <br />
    </div>
  </div>
</div>
<script type="text/javascript">
@if(isNotEmpty(target)&&isNotEmpty(thumb)){
$('a.thumbnail').on('click', function(e) {
	$('#${target}').val($(this).parent().find('input').val());
	$('#${thumb}').find('img').attr('src', $(this).find('img').attr('src'));
	$('#modal-image').modal('hide');
	return false;
});
@}

$('a.directory').on('click', function(e) {
	$('#modal-image').load($(this).attr('href'));
    return false;
});

$('#button-parent').on('click', function(e) {
	$('#modal-image').load($(this).attr('href'));
    return false;
});

$('#button-refresh').on('click', function(e) {
	$('#modal-image').load($(this).attr('href'));
    return false;
});

$('input[name=\'search\']').on('keydown', function(e) {
	if (e.which == 13) {
		$('#button-search').trigger('click');
	    return false;
	}
});
$('#button-search').on('click', function(e) {
	var url = '${ctxPath}/imagemanager?path=${currentPath}';

	var filter_name = $('input[name=\'search\']').val();

	if (filter_name) {
		url += '&filterName=' + encodeURIComponent(filter_name);
	}

    @if(isNotEmpty(target)){
    url += '&target=' + '${target}';
    @}

    @if(isNotEmpty(thumb)){
    url += '&thumb=' + '${thumb}';
    @}
	
	$('#modal-image').load(url);
});
</script>
<script type="text/javascript">
$('#button-upload').on('click', function() {
	$('#form-upload').remove();

	$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file[]" value="" multiple="multiple" /></form>');

	$('#form-upload input[name=\'file[]\']').trigger('click');

	if (typeof timer != 'undefined') {
    	clearInterval(timer);
	}

	timer = setInterval(function() {
		if ($('#form-upload input[name=\'file[]\']').val() != '') {
			clearInterval(timer);

			$.ajax({
				url: '${ctxPath}/imagemanager/upload?path=${currentPath}',
				type: 'post',
				dataType: 'json',
				data: new FormData($('#form-upload')[0]),
				cache: false,
				contentType: false,
				processData: false,
				beforeSend: function() {
					$('#button-upload i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
					$('#button-upload').prop('disabled', true);
				},
				complete: function() {
					$('#button-upload i').replaceWith('<i class="fa fa-upload"></i>');
					$('#button-upload').prop('disabled', false);
				},
				success: function(json) {
					if (json['code']==200) {
                        $('#button-refresh').trigger('click');
					}else{
                        alert(json['message']);
					}
				},
				error: function(xhr, ajaxOptions, thrownError) {
					alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
				}
			});
		}
	}, 500);
});

$('#button-folder').popover({
	html: true,
	placement: 'bottom',
	trigger: 'click',
	title: '新建文件夹',
	content: function() {
		html  = '<div class="input-group">';
		html += '  <input type="text" name="folder" value="" placeholder="新文件夹名称" class="form-control">';
		html += '  <span class="input-group-btn"><button type="button" title="新建文件夹" id="button-create" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></span>';
		html += '</div>';

		return html;
	}
});

$('#button-folder').on('shown.bs.popover', function() {
	$('#button-create').on('click', function() {
		$.ajax({
			url: '${ctxPath}/imagemanager/folder?path=${currentPath}',
			type: 'post',
			dataType: 'json',
			data: 'folder=' + encodeURIComponent($('input[name=\'folder\']').val()),
			beforeSend: function() {
				$('#button-create').prop('disabled', true);
			},
			complete: function() {
				$('#button-create').prop('disabled', false);
			},
			success: function(json) {
                if (json['code']==200) {
                    $('#button-refresh').trigger('click');
                }else{
                    alert(json['message']);
                }
			},
			error: function(xhr, ajaxOptions, thrownError) {
				alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
			}
		});
	});
});

$('#modal-image #button-delete').on('click', function(e) {
	if (confirm('确定要删除文件吗？')) {
		$.ajax({
			url: '${ctxPath}/imagemanager/delete',
			type: 'post',
			dataType: 'json',
			data: $('input[name^=\'path\']:checked'),
			beforeSend: function() {
				$('#button-delete').prop('disabled', true);
			},
			complete: function() {
				$('#button-delete').prop('disabled', false);
			},
			success: function(json) {
                if (json['code']==200) {
                    $('#button-refresh').trigger('click');
                }else{
                    alert(json['message']);
                }
			},
			error: function(xhr, ajaxOptions, thrownError) {
				alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
			}
		});
	}
});
</script>

@if(isEmpty(target)&&isEmpty(thumb)){
</div>
</body>
</html>
@}